<template>
    <div class="login">
        <video 
        autoplay
        loop
        muted
        playsInline
        :src="src" 
        class="myvideo"></video>
         <div class="login-box">
            <h2 class="title">欢迎注册(学员)</h2>
            <div class="box">
                <el-form
                    label-position="left"
                    class="myform"
                    status-icon
                    :model="form"
                    ref="myForm"
                    :size="formSize"
                    :rules="rules"
                >
                    <el-form-item label="用户名称" prop="username">
                        <el-input :prefix-icon="Avatar" v-model="form.username" type="text" placeholder="请输入用户名" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="手机号码" prop="phone">
                        <el-input :prefix-icon="Phone" v-model="form.phone" type="text" placeholder="请输入手机号" autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="登录密码" prop="password">
                        <el-input :prefix-icon="Lock" @blur="checkdbpass" show-password v-model="form.password" type="password" placeholder="请输入密码"  autocomplete="off" />
                    </el-form-item>
                    <el-form-item label="确认密码" prop="dbpass">
                        <el-input :prefix-icon="Lock" show-password v-model="form.dbpass" type="password" placeholder="请确认密码" autocomplete="off" />
                    </el-form-item>

                    <el-form-item class="lastitem">
                        <div class="alinks">
                            <router-link to="/login" class="litem color">已有账号,去登录</router-link>
                            <router-link :to="{name:'findpass'}"  class="litem bg">找回密码</router-link>
                        </div>
                    </el-form-item>

                    <el-form-item class="lastitem" >
                        <el-button type="success" @click="submitForm" class="btnblock">注册</el-button>
                        <el-button type="danger" @click="resetForm" class="btnblock">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>


<script setup>
import { onMounted, reactive , ref, toRefs} from "vue"
import { Calendar, Search , Phone , Lock , Avatar } from '@element-plus/icons-vue'
import {reg} from '@/utils/validate'
import { ElMessage } from 'element-plus'
import axios from "axios"
import {Http} from '@/api'
import { useRouter } from "vue-router"

const testApi = async ()=>{
    let res = await Http.testApi()
}
onMounted(()=>{
    testApi()
    // axios.get("http://localhost:3800/api/test")
    // .then(res=>{
    //     console.log(res)
    // })
})
const router = useRouter()
const src = ref('https://img-baofun.zhhainiao.com/pcwallpaper_ugc/preview/3760b2031ff41ca0bd80bc7a8a13f7bb_preview.mp4')
const formSize = ref("default")
const myForm = ref()
const form = ref({
    role:1,  // 1 学员  2. 讲师 3.管理员 
})
// 检测2次是否一致   dbpass = value 
const checkPassEqual = (rule, value, callback)=>{
    if(reg.pwd.test(form.value.password)){
        if(form.value.password !== value ){
            callback(new Error("2次密码不一致"))
        }else{
            callback()
        }
    }else{
        // 唤起密码校验
        myForm.value.validateField("password")
        callback()
    }
}
// 密码失去焦点 比较2次密码是否一致 
const checkdbpass = (value)=>{
    if(reg.pwd.test(form.value.password) && reg.pwd.test(form.value.dbpass)){
        // 唤起确认密码校验
        myForm.value.validateField("dbpass")
    }
}
const rules = reactive({
    username:[{
        required: true, message: '请输入用户名', trigger: 'blur'
    }],
    phone:[
        {required: true, message: '请输入手机号', trigger: 'blur'},
        {pattern:reg.phone  , message: '请输入有效的手机号', trigger: 'blur'},
    ],
    password:[
        {required: true, message: '请输入密码', trigger: 'blur'},
        {pattern:reg.pwd  , message: '请输入6-16位数字加字母组合的密码', trigger: 'blur'},
    ],
    dbpass:[
        {required: true, message: '请输入确认密码', trigger: 'blur'},
        {pattern:reg.pwd  , message: '请输入6-16位数字加字母组合的密码', trigger: 'blur'},
        {
            validator:checkPassEqual, trigger: 'blur'
        }
    ]
})
// 提交表单 
const submitForm = ()=>{
    myForm.value.validate(async valid=>{
        if(valid){
            // 校验通过
            console.log(form.value)
            let res = await Http.register(form.value)
            if(res.code==200){
                router.push({name:"login",query:form.value})
            }
        }else{
            // 校验失败 
             ElMessage.error('正则校验失败,请再次输入')
        }
    })
}
const resetForm = ()=>{
    console.log(myForm.value)
    myForm.value.resetFields()
}
// const state = reactive({
//     form:{}
// })
// const {form} = toRefs(state)  // 
</script>